<template>
  <div>
    <h2>List --- List ---List</h2>
    <h3>{{ title }}</h3>

    <p v-for="(l, i) in list" :key="i">
      <span>{{ l.name }} --- {{ l.age }} --- {{ l.six }}</span> ---
      <button>修改</button>
    </p>

    <p>添加用户:</p>
    <p><input type="text" v-model="body.name" placeholder="姓名" /></p>
    <p><input type="text" v-model="body.age" placeholder="年龄" /></p>
    <p><input type="text" v-model="body.six" placeholder="性别" /></p>
    <button @click="addUser">添加用户</button>
  </div>
</template>


<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000";
export default {
  data() {
    return {
      title: "这里是列表页",
      list: [],
      body: {},
    };
  },
  methods: {
    // addUser() {
    //   axios({
    //     url: "/user",
    //     method: "post",
    //     data: this.body,
    //   })
    //     .then((res) => {
    //       console.log(res);
    //       this.list = res.data;
    //     })
    //     .catch((err) => {
    //       throw err;
    //     });
    // },
    addUser() {
      axios
        .post("/user", this.body)
        .then((res) => {
          axios
            .get("/user")
            .then((res) => {
              this.list = res.data;
              this.body = {};
            })
            .catch((err) => {throw err});
        })
        .catch((err) => {throw err});
    },
  },
  mounted() {
    //   axios({
    //       url:"/user",  //会自动拼接上面的数据
    //       method:"get"
    //   }).then(res=>{
    //       console.log(res);
    //       this.list = res.data
    //   }).catch(err=>{
    //       console.log(err);
    //   })

    axios
      .get("/user")
      .then((res) => {
        console.log(res);
        this.list = res.data;
      })
      .catch((err) => {
        throw err;
      });
  },
};
</script> 